<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="余额明细"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-cell :title="`余额明细`" value-class="g-c--red"></van-cell>
    </van-cell-group>
    <van-tabs v-model="active" animated sticky swipeable>
      <van-tab
        v-for="(arr, index) of withdrawList"
        :key="index"
        :title="withdrawStatusList[index]"
      >
        <van-panel
          v-for="item of arr.withdrawList"
          :key="item.account_withdraw_id"
          class="g-mb--10"
          :title="`ID：${item.account_withdraw_id}`"
          :status="withdrawStatusList[index]"
        >
          <div class="g-c--gray g-fs--12 g-p--10">
            <p class="g-c--red g-fs--14 g-mb--5">金额：{{ item.amount }}元</p>
            <p>银行：{{ item.bank }}</p>
            <p>银行卡号：{{ item.bankcard }}</p>
            <p>姓名：{{ item.realname }}</p>
            <p v-if="item.note">备注：{{ item.note }}</p>
            <p>申请时间：{{ item.created_time }}</p>
            <p v-if="item.withdraw_time != 0">
              打款时间：{{ item.withdraw_time }}
            </p>
          </div>
        </van-panel>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { NavBar, Cell, CellGroup, Panel, Tab, Tabs } from "vant";
import { userModel } from "@/api";
import Tool from "@/lib/tool";
const tool = new Tool();
export default {
  name: "balance_details",
  components: {
    "van-nav-bar": NavBar,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-panel": Panel,
    "van-tab": Tab,
    "van-tabs": Tabs
  },
  data() {
    return {
      active: 0,
      withdrawList: [[], [], []],
      withdrawStatusList: ["待审核", "已打款", "无效"]
    };
  },
  created() {
    this.getWithdrawList();
  },
  methods: {
    /* 余额明细 */
    getWithdrawList() {
      const getcreatedList = userModel._getWithdrawList({
        status: "created"
      });
      const getsuccessList = userModel._getWithdrawList({
        status: "success"
      });
      const getfailureList = userModel._getWithdrawList({
        status: "failure"
      });
      Promise.all([getcreatedList, getsuccessList, getfailureList]).then(
        res => {
          this.withdrawList = res.map(arr => {
            arr.withdrawList.map(list => {
              list.created_time = tool.formatTime(list.created_time);
              if (list.withdraw_time != 0)
                list.withdraw_time = tool.formatTime(list.withdraw_time);
              return list;
            });
            return arr;
          });
        }
      );
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped></style>
